<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>查看及编辑函数和脚本</title>
        <script src="/lib/axios.js"></script>
        <script src="/lib/vue.js"></script>
        <link rel="stylesheet" href="/lib/elementindex.css">
        <script src="/lib/elementindex.js"></script>
    </head>

    <body>
        <div id="app" style="width:100%">

            <el-tabs value='config'>
                <el-tab-pane label="基本信息" name="rbasic">
                    <hc-rule-basic :ruledef='ruleDef'></hc-rule-basic>
                </el-tab-pane>
                <el-tab-pane label="规则配置" name="config">
                    <el-form label-width="auto">
                        <el-form-item label='请求方法'>
                            <el-select v-model="ruleDef.method">
                                </el-option>
                                <el-option v-for="item in methodTypes" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label='URL'>
                            <el-input v-model.trim="ruleDef.url" type='url'>
                            </el-input>
                        </el-form-item>
                        <el-tabs value='Headers'>
                            <el-tab-pane label='Headers' name='Headers'>
                                <el-table :data="ruleDef.headerList" style="width: 100%;margin-bottom: 20px;" border>
                                    <el-table-column label="Key">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.key" placeholder='header item key'></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="Value">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.value" placeholder='header item value'></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" min-width="100px">
                                        <template slot="header">
                                            <span>操作</span>
                                            <el-button size="mini" type="success" @click="triggerAppendHeader">增加Header
                                            </el-button>
                                        </template>
                                        <template slot-scope="scope">
                                            <el-button size='mini' @click="triggerDeleteHeader(scope.$index)">X
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>

                            </el-tab-pane>
                            <el-tab-pane label='预处理' name='prepare'>
                                <hc-groovy-editor :panel='{vari:true,func:true,snip:true}' v-model="ruleDef.prepare"></hc-groovy-editor>
                            </el-tab-pane>
                            <el-tab-pane label='请求数据' name='requestBody'>
                                <hc-groovy-editor :panel='{vari:true,func:true,snip:true}' v-model="ruleDef.requestBody"></hc-groovy-editor>
                            </el-tab-pane>
                            <el-tab-pane label='成功处理' name='succeeded'>
                                <hc-groovy-editor :panel='{vari:true,func:true,snip:true}' v-model="ruleDef.succeeded"></hc-groovy-editor>
                            </el-tab-pane>
                            <el-tab-pane label='失败处理' name='failed'>
                                <hc-groovy-editor :panel='{vari:true,func:true,snip:true}' v-model="ruleDef.failed"></hc-groovy-editor>
                            </el-tab-pane>
                        </el-tabs>

                        <el-form-item label="">
                            <el-button type="primary" @click='handleUpdateRuleEvent'>保存修改</el-button>
                            &nbsp;&nbsp;
                            <el-button type="danger" @click='handleDeleteRuleEvent'>删除规则</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="规则测试" name="test">
                    <hc-test :rpath="ruleDef.rpath" :inputs='ruleDef.rtest' @save-inputs="ruleDef.rtest = $event"></hc-test>
                </el-tab-pane>
            </el-tabs>
        </div>

        <script src="/lib/ace-noconflict/ace.js"></script>
        <script src="/lib/ace-noconflict/ext-language_tools.js"></script>
        <link rel="stylesheet" href="/com/hc-groovy-editor.css" />
        <link rel="stylesheet" href="/com/hc-lang-editor.css"/>
        <script type='module'>
            import * as $util from '/lib/hc-util.js'
            import * as $rest from '/lib/hc-rest-service.js'
            import {} from '/com/hc-test.js'
            import {} from '/com/hc-rule-basic-properties.js'
            import {} from '/com/hc-groovy-editor.js'
            
            function transformListToHeader(list) {
                let header = {}
                list.forEach(it => {
                    if (it.key != undefined && it.key != null && it.key.trim() != "") {
                        header[it.key.trim()] = it.value.trim();
                    }
                })
                return header;
            }

            function transformHeaderToList(headers) {
                let list = [];
                let i = 0;
                for (let key in headers) {
                    list.push({
                        id: i++,
                        key: key,
                        value: headers[key]
                    })
                }
                return list
            }

            // var vm
            $rest.check$pinfoOrLoad(function() {
                    $rest.obtainRuleDefByRpath($util.getUrlArgOrDefault('rpath','xsxdjc/extcall/Simple'), initvm);
            }, 'xsxdjc/Main');
            
            function initvm(ruleDef) {
                ruleDef.headerList = transformHeaderToList(ruleDef.headers);
                window.vm = new Vue({
                    el: '#app',
                    data: {
                        methodTypes: [{
                            label: 'POST',
                            value: 'post'
                        }, {
                            label: 'GET',
                            value: 'get'
                        }],
                        ruleDef: ruleDef
                    },
                    methods: {
                        handleUpdateRuleEvent() {
                            this.ruleDef.headers = transformListToHeader(this.ruleDef.headerList);
                            $rest.updateRuleDefInVm(this)
                        },
                        handleDeleteRuleEvent() {
                            $rest.deleteRuleDefInVm(this)
                        },
                        triggerDeleteHeader: function(index) {
                            vm.ruleDef.headerList.splice(index, 1);
                        },
                        triggerAppendHeader: function() {
                            vm.ruleDef.headerList.push({
                                id: $util.maxOfProp(vm.ruleDef.headerList, 'id') + 1,
                                key: '',
                                value: ''
                            })
                        },
                    },
                });
            };
        </script>

    </body>

</html>
